/* components */
import TaskAllotListMethods from '@src/modules/task/taskTypes/allot/TaskAllotListMethods'
import { BizTableTaskScopeSlot } from '@src/component/business/BizTable/BizTableTask.tsx'
import BatchAllotDialog from '@src/modules/task/taskTypes/allot/components/BatchAllotDialog/BatchAllotDialog.tsx'
import TaskAllotModal from '@src/modules/task/components/TaskAllotModal/TaskAllotModal.tsx'
/* enum */
import SubscriptionModuleEnum from '@model/enum/SubscriptionModuleEnum'
import { assignWorkOrder } from '@model/enum/PropaganPageEnum'

/* service */
import { isInApprove } from '@service/TaskService'
/* vue */
import { VNode } from 'vue'
import i18n from '@src/locales'
class TaskAllotListRender extends TaskAllotListMethods {  
  /**
   * @description: 渲染系统集成引导入口
   * @return {VNode}
   */  
   private renderPropagandaPageButton(): VNode {
    return (
      <propaganda-Page 
        propagandaData={ assignWorkOrder } 
      />
    )
  }
  /**
   * @description: 渲染订阅按钮
   * @return {VNode}
   */  
  private renderSubscriptionButton(): VNode {
    return (
      <subscription-button 
        class="mr_12 cur-point"
        module={SubscriptionModuleEnum.TaskAllot}
        subscribed={this.initData?.hasSub}
        tooltipContent={i18n.t('task.tip.subscribeTaskTip')}
        onChange={(value: boolean) => this.initData.hasSub = value}
      >
      </subscription-button>
    )
  }
  
  /**
   * @description: 渲染创建计划任务按钮
   * @return {VNode}
   */  
  private renderCreatePlanTaskButton(): VNode {
    return (
      <permission auth={this.initData.showPlanTask}>
        <el-tooltip effect='dark' content={i18n.t('task.tip.createPlanTip')} placement='bottom'>
          <el-button type='primary' onClick={() => this.showPlanTaskDialog()}>
            {i18n.t('common.base.scheduledTasks')}
          </el-button>
        </el-tooltip>
      </permission>
    )
  }
  
  /**
   * @description: 渲染地图派单按钮
   * @return {VNode}
   */  
  private renderMapAllotButton(): VNode {
    return (
      <el-button type='primary' onClick={() => this.showMapAllotDialog()}>
        {i18n.t('task.taskTypes.allot.mapAllot')}
      </el-button>
    )
  }
  
  /**
   * @description: 渲染批量指派按钮
   * @return {VNode}
   */  
  private renderBatchAllotButton(): VNode {
    return (
      <el-button type='primary' onClick={() => this.showBatchAllotDialog()}>
        {i18n.t('task.taskTypes.allot.batchAllot')}
      </el-button>
    )
  }
  
  /**
   * @description: 渲染表格作用域插槽
   * @return {VNode | null} 插槽或空
   */  
  public renderTableScopedSlot(): Record<string, (data: BizTableTaskScopeSlot) => JSX.Element | null>| null {
    // debugger
    return {
      // 指派操作
      allotOperation: ({ value }: BizTableTaskScopeSlot) => {
        // if (!this?.allowTaskViewDetail) return null
        // 是否在审批中
        if (isInApprove(value)) return null
        return (
          <el-button
            class='accept-task-button'
            type='text'
            size='small'
            loading={value.allotLoading}
            onClick={() => this.allotTask(value)}
          >
            {i18n.t('common.task.button.allot')}
          </el-button>
        )
      }
    }
  }
  
  /**
   * @description: 渲染地图派单弹窗组件
   * @return {VNode}
   */ 
  public renderAllotMapDialogComponent(): VNode {
    return (
      <allot-map-dialog 
        ref='AllotMapDialogComponent' 
        mapShow={this.mapShow}
        onHide={() => this.toggleMapShow(false)}
        advancedSearchParams={{
          ...this.searchParams,
          ...this.advancedSearchModel,
          keyword: this.searchParams.keyword
        }} 
        restructAllot={this.initData?.restructAllot}
        taskIdList={this.selectedIds} 
        taskConfig={this.taskConfig}
      />
    )
  }
  
  /**
   * @description: 渲染指派组件
   * @return {VNode}
   */ 
  public renderAllotModalComponent(): VNode {
    return (
      <TaskAllotModal
        ref="TaskAllotModalComponent"
        fields={this.taskFields}
        task={this.currOperationTask}
        loginUser={this.currLoginUser}
        isReAllot={false}
        planStartTime={this.currOperationTask.planStartTime}
        planEndTime={this.currOperationTask.planEndTime}
        onSuccess={() => this.allotSuccess()}
        source="allotList"
      />
    )
  }
  
  /**
   * @description: 渲染计划任务表单组件
   * @return {VNode}
   */ 
  public renderPlanTaskEditFormComponent(): VNode {
    return (
      <plan-task-edit-form 
        ref='PlanTaskEditFormComponent'
        originForm={this.planForm} 
        task-config={this.taskConfig} 
        onSubmit={(planTaskParams: Record<string, any>) => this.submitWithPlanTask(planTaskParams)} 
      >
      </plan-task-edit-form>
    )
  }

  /**
   * @description: 渲染批量指派弹窗组件
   * @return {VNode}
   */ 
  public renderBatchAllotDialogComponent(): VNode {
    return (
      <batch-allot-dialog ref='BatchAllotDialogComponent' taskIdList={this.selectedIds} taskConfig={this.taskConfig} onRefresh={()=> {this.refresh()}} />
    )
  }
  
  /**
   * @description: 渲染操作区域容器
   * @return {VNode}
   */ 
  public renderOperationContainer(): VNode {
    return (
      <div ref="tableDoContainer" class='common-list-view__v2 operation-container pad-b-none'>
        <div class='common-list-view-header__v2 task-ai'>
          <div class='common-list-view-header__v2-left task-ai'>
            { this.renderCreatePlanTaskButton() }
            { this.allowBatchDispatch && this.renderMapAllotButton() }
            { this.allowBatchDispatch && this.renderBatchAllotButton() }
          </div>
          <div class='common-list-view-header__v2-right task-ai'>
            { !this.isOpenServiceItemsGray && this.renderPropagandaPageButton() }
            { !this.isBasicEditionHideSubscribe && this.renderSubscriptionButton() }
            { this.renderSelectColumnsButton() }
          </div>
        </div>
      </div>
    )
  }
  // public changePackUp(){
  //   this.packUp = !this.packUp;
  //   this.$nextTick(()=> {
  //     let tableHeaderTypeContainer_ = this.$refs.tableHeaderTypeContainer?.offsetHeight;
  //     let padding = [tableHeaderTypeContainer_, 24, 32, 16, 32]
  //     this.knowTableContainerHeight(padding)
  //   })
  // };
  /**
   * @description: 渲染头部容器
   * @return {VNode}
   */ 
  public renderHeaderContainer(): VNode {
    return (
      <div ref="tableHeaderContainer" class='header-container'>
        <div class='common-list-header__v2'>
        <div class="search-container">
          { this.renderSearchContainer() }
        </div>
        { this.renderAdvancedSearchButton() }
        </div>
       {this.packUp?<div class="task-type-filter">
        <div class="task-list-header-nav">
          <div class="task-filter-item">
            <div class="task-font14 task-c7 state">{i18n.t('common.task.taskType')}：</div>
            <div class="list" >
              <div class="list-item task-flex task-ai">
                {[...[{name:'全部',id:undefined}],...this.taskTypes].map((item:any)=>{
                  return (item.id == this.currentTaskType?.id )?<div class="task-nav-create task-c2 task-padding-0" onClick={() => this.changeTaskType(item)}>
                    <div class="actived" title={item.name}>{item.name}</div>
                  </div>: <div class="task-nav-create" onClick={() => this.changeTaskType(item)}>
                    <span title={item.name}>{item.name}</span>
                  </div>
                })}
              </div>
            </div>
          </div>
       </div>
      </div>:null}
      <div class="pack-up">
        <div onClick={() => this.changePackUpLocal()}>
           {this.packUp?<i class="iconfont icon-Icon_up"></i>:<i class="iconfont icon-more" ></i>}
         </div>
      </div>
    </div>
    )
  }
  
  /**
   * @description: 渲染其他组件容器
   * @return {VNode}
   */ 
  public renderComponentsContainer(): VNode {
    return (
      <div>
        { this.renderAdvancedSearchPanelAllot() }
        { this.renderSelectColumnComponent() }
        { this.renderSelectionPanelComponent() }
        { this.renderPlanTaskEditFormComponent() }
        { this.renderBatchAllotDialogComponent() }
        { this.renderAllotMapDialogComponent() }
        { this.renderAllotModalComponent() }
      </div>
    )
  }
}

export default TaskAllotListRender
